<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul>
                    <li>
                        <img src="../assets/img/cate2/meishi.webp" alt="">
                        <span>美食</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jiudianminsu.webp" alt="">
                        <span>酒店民宿</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/xiuxianwanle.webp" alt="">
                        <span>休闲玩乐</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/yiliaoyake.webp" alt="">
                        <span>医疗牙科</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/dianyingyanchu.webp" alt="">
                        <span>电影演出</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/meituanyouxuan.webp" alt="">
                        <span>美团优选</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/yinpinxiaochi.webp" alt="">
                        <span>饮品小吃</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/shenghuofuwu.webp" alt="">
                        <span>生活服务</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jingdianmenpiao.webp" alt="">
                        <span>景点门票</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/huochepiaojipiao.webp" alt="">
                        <span>火车票机票</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/qiche.webp" alt="">
                        <span>骑车</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/dache.webp" alt="">
                        <span>打车</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/mianfeishuiguo.webp" alt="">
                        <span>免费水果</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/tiantianhongbao.webp" alt="">
                        <span>天天红包</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/paotui.webp" alt="">
                        <span>跑腿</span>
                    </li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul>
                    <li>
                        <img src="../assets/img/cate2/lifananshi.webp" alt="">
                        <br>
                        <span>理发男士</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/anmozuliao.webp" alt="">
                        <span>按摩足疗</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/zhoubianlvyou.webp" alt="">
                        <span>周边旅游</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/shoujichongzhi.webp" alt="">
                        <span>手机充值</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/yixuemeirong.webp" alt="">
                        <span>医学美容</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/chongwu.webp" alt="">
                        <span>宠物</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/xiyuhanzheng.webp" alt="">
                        <span>洗浴汗蒸</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/hongbaoqiandao.webp" alt="">
                        <span>红包签到</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/dianwoyouqian.webp" alt="">
                        <span>点我有钱</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/ktv.webp" alt="">
                        <span>KTV</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/zhuanyizhuan.webp" alt="">
                        <span>赚一赚</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/yangcheyongche.webp" alt="">
                        <span>养车用车</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jiehunsheying.webp" alt="">
                        <span>结婚摄影</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/yundongjianshen.webp" alt="">
                        <span>运动健身</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/xuexipeixun.webp" alt="">
                        <span>学习培训</span>
                    </li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul>
                    <li>
                        <img src="../assets/img/cate2/mianfeifuli.webp" alt="">
                        <span>免费福利</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/dianwnayouxi.webp" alt="">
                        <span>电玩游戏</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/dapailinghongbao.webp" alt="">
                        <span>打牌领红包</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/chongdianbao.webp" alt="">
                        <span>充电宝</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/qinzileyuan.webp" alt="">
                        <span>亲子乐园</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/qichepiao.webp" alt="">
                        <span>汽车票</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jiajuzhuangxiu.webp" alt="">
                        <span>家居装修</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/shangchanggouwu.webp" alt="">
                        <span>商场购物</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jiuba.webp" alt="">
                        <span>酒吧</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/muyingfuwu.webp" alt="">
                        <span>母婴服务</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/mishijuchang.webp" alt="">
                        <span>密室剧场</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/xinqitiyan.webp" alt="">
                        <span>新奇体验</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/wuzhangaiwaimai.webp" alt="">
                        <span>无障碍外卖</span>
                    </li>
                    <li>
                        <img src="../assets/img/cate2/jieqian.webp" alt="">
                        <span>借钱</span></li>
                    <li>
                        <img src="../assets/img/cate2/shenghuojiaofei.webp" alt="">
                        <span>生活缴费</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper"

    export default {
        name: "CategoryCom2Fls",
        mounted() {
            new Swiper(".swiper-container", {
                autoplay: false
            })
        }
    }
</script>

<style scoped>
    @import "/node_modules/swiper/dist/css/swiper.min.css";
    .swiper-container {
        width: 96vw;
        height: 220px;
        margin: 0 auto 10px;
        background: #fff;
        border-radius: 10px;
    }
    ul {
        list-style: none;
    }
    li{
        float: left;
        width: 20%;
        height: 60px;
        text-align: center;
        margin-bottom: 10px;
        font-size: 14px;
    }
    img {
        width: 85%;
        height: 70%;
        display: block;
        margin-left: 5px;

    }
    .swiper-wrapper>.swiper-slide:nth-child(2)>ul>li:nth-child(1)>img{
        width: 55%;
        height: 55%;
        margin-top: 8px;
        margin-left: 25px;
    }
</style>